<template>
	<div ref="chartRef" :style="{ width, height }"></div>
</template>
<script lang="ts" setup>
import { Ref, ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import type { PropType } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const props = defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
	color: {
		type: Array as PropType<string[]>,
		default: () => ['#00c997', '#ff9424'],
	},
	deviceNormalCount: {
		type: String as PropType<string>,
		default: '0',
	},
	deviceFaultCount: {
		type: String as PropType<string>,
		default: '0',
	},
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

watchEffect(
	() => {
		let deviceNormalCount = parseInt(props.deviceNormalCount) || 0;
		let deviceFaultCount = parseInt(props.deviceFaultCount) || 0;
		setOptions({
			tooltip: {
				trigger: 'item',
				formatter: '{b}: {d}%<br /> {c}',
			},
			legend: {
				// type: 'scroll',
				// orient: 'vertical',
				show: false,
				top: 0,
				right: 0,
			},
			series: [
				{
					type: 'pie',
					z: 999,
					radius: ['50%', '60%'],
					center: ['50%', '50%'],
					color: props.color,
					minAngle: 10,
					startAngle: 45,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 0,
					},
					label: {
						show: true,
						formatter: '{b}: {c}\n{d}%',
						color: '#ccc',
					},
					data: [
						{
							name: t('analysis.normal'),
							value: deviceNormalCount,
						},
						{
							name: t('analysis.fault'),
							value: deviceFaultCount,
						},
					],
					labelLine: {
						show: true,
					},
					animationType: 'scale',
					animationEasing: 'exponentialInOut',
					animationDelay: function () {
						return Math.random() * 400;
					},
				},
			],
		});
	},
	{ flush: 'post' }
);
</script>
